<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<title>时间计划制定</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/mui.picker.min.css" rel="stylesheet" />
		<style>
			input, select, textarea, label {
            font-size: 15px;
            /*height: 35px !important;*/
        }

        .mui-input-list .mui-checkbox input[type=checkbox], .mui-radio input[type=radio] {
            left: 0;
            width: 20px;
            height: 20px;
        }

            .mui-checkbox input[type=checkbox]:before, .mui-radio input[type=radio]:before {
                font-size: 22px;
                line-height: 30px;
            }

        .mui-input-list .mui-input-row {
            display: inline-block;
            height: 35px;
        }

            .mui-input-list .mui-input-row:after {
                background-color: transparent;
            }

        .mui-input-list .mui-checkbox label, .mui-radio label {
            padding-right: 0;
            padding-left: 30px;
            padding-right: 20px;
        }

        .mui-input-row .mui-btn {
            height: 50%;
            text-align: center;
            padding: 2%;
            float: left;
            margin: 5px 0;
            border-radius: 0;
            width: auto;
            background-clip: inherit !important;
        }

        .mui-input-row label.choose {
            padding: 2%;
            float: left;
            width: auto;
            background: #007aff;
            border-radius: 2px;
            color: white;
            margin: 1% .5%;
            height: 50% !important;
        }

        .mui-input-row label.choose_none {
            padding: 2%;
            float: left;
            width: auto;
            margin: 1% .5%;
            height: 50% !important;
            font-size: 14px;
        }

        .mui-input-row .mui-condition {
            width: 21% !important;
            text-align: center;
            border-bottom: 1px solid #ccc !important;
            padding: 2%;
            margin: 0 2px 0 7px;
            border-radius: 0;
            height: auto;
        }

        .mui-input-row .mui-condition-label {
            padding: 13px 2px;
            width: auto !important;
        }

        .mui-btn-block {
            padding: 8px 0;
            margin: 0;
        }

        .mui-card-title {
            height: 35px;
            line-height: 35px;
            margin-bottom: 5px;
            border-bottom: 1px solid rgb(204, 204, 204);
        }

        #controls .mui-card-content, #targets .mui-card-content {
            max-height: 260px;
            padding: 3px 5px;
            overflow: hidden;
            overflow-y: auto;
        }
			.mui-bar{
				-webkit-box-shadow: 0 0 0px rgba(0,0,0,.85);
			    box-shadow: 0 0 0px rgba(0,0,0,.85);
				    height: 50px;
			}
			.mui-title{
				line-height: 50px;
			    color: #fff;
			}
			.mui-icon-back:before, .mui-icon-left-nav:before {
			    content: '\e471';
			    color: #fff;
			}
			.mui-icon-plusempty:before {
			    content: '\e468';
			    color: #fff;
			}
        * {
            /* touch-action: none; */
        }
    </style>
	</head>
	<body>
		<div style="height: 23px;width: 100%;background: #464646;position: fixed;top: 0;    z-index: 999;"></div>
		<header class="mui-bar mui-bar-nav" style="background: #464646;top: 22px;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">时间计划制定</h1>
		</header>
		<div class="mui-content mui-fullscreen" id="plans" style=" margin-top: 70px; padding-top: 0;">
			<!--计划内容-->
			<div class="mui-card mui-plan-info">
				<div class="mui-card-header" id="planheader"></div>
				<div class="mui-card-content">
					<!-- 计划信息 -->
					<div class="mui-input-row">
						<label>计划名称</label>
						<input type="text" placeholder="请输入计划名称" v-model="intervalobj.planname">
					</div>
					<!-- 控制类型选择 -->
					<div class="mui-input-row">
						<div class="mui-input-list">
							<label>控制类型</label>
							<div class="mui-input-row mui-radio" data-type="switch">
								<input name="radio1" type="radio" checked="checked">
								<label>开关</label>
							</div>
							<div class="mui-input-row mui-radio" data-type="control">
								<input name="radio1" type="radio">
								<label>控制器</label>
							</div>
						</div>
					</div>
					<!-- 控制设备选择 -->
					<div class="mui-input-row condition">
						<label>控制设备</label>
						<div style="width: 65%;float: left;padding: 5px">
							<label class="choose_none" v-show="isctrl">-请选择-</label>
							<label class="choose" v-for="c in sel_control">{{c.name}}</label>
						</div>
					</div>
					<!-- 执行模式选择 -->
					<div class="mui-input-row">
						<div class="mui-input-list">
							<label>执行模式</label>
							<div class="mui-input-row mui-radio" data-type="repeat">
								<input name="radio2" type="radio" checked="checked">
								<label>每天</label>
							</div>
							<div class="mui-input-row mui-radio" data-type="between">
								<input name="radio2" type="radio">
								<label>日期段</label>
							</div>
						</div>
					</div>
					<!-- 循环模式 -->
					<div class="mui-input-row" v-show="isrepeat">
						<label>执行日期</label>
						<div style="width: 65%;float: left;padding: 5px">
							<label class="choose_none" v-on:click="chooseRepeatDate()">{{startDate}}</label>
						</div>
					</div>
					<!-- 日期内循环模式 -->
					<div class="mui-input-row" v-show="isbetween">
						<label>执行日期段</label>
						<div style="width: 65%;float: left;padding: 5px">
							<label class="choose_none" v-on:click="chooseBteweenDate('start')">{{startDate}}</label>
							<div style="height:10px;width:100%;clear:both"></div>
							<label class="choose_none" v-on:click="chooseBteweenDate('end')">{{endDate}}</label>
						</div>
					</div>

					<!-- 执行时间 -->
					<div class="mui-input-row">
						<label>执行时间</label>
						<div style="width: 65%;float: left;padding: 5px">
							<label class="choose_none" v-on:click="chooseBetweenTime('start')">{{startTime}}</label>
							<div style="height:10px;width:100%;clear:both"></div>
							<label class="choose_none" v-on:click="chooseBetweenTime('end')">{{endTime}}</label>
						</div>
					</div>

					<!-- 触发条件及执行条件选择 -->
					<div class="mui-card-content-inner">
						<!--执行状态（开关状态）-->
						<div class="mui-input-row" v-show="isswitch">
							<div class="mui-card-title">执行状态</div>
							<div class="mui-input-row">
								<label style="width:45%">开始时执行</label>
								<span class="mui-btn mui-btn-blue" data-state="open" data-type="cstart">开启</span>
								<span class="mui-btn" data-state="close" data-type="cstart">关闭</span>
							</div>
							<div class="mui-input-row">
								<label style="width:45%">结束时执行</label>
								<span class="mui-btn" data-type="cend" data-state="open">开启</span>
								<span class="mui-btn mui-btn-blue" data-type="cend" data-state="close">关闭</span>
							</div>
						</div>
						<!--执行状态（控制器状态）-->
						<div class="mui-input-row" v-show="iscontrol">
							<div class="mui-card-title">执行状态</div>
							<div class="mui-input-row">
								<label style="width:45%">开始时执行</label>
								<span class="mui-btn mui-btn-blue mui-btn-multi" data-state="open" data-type="cstart">展开</span>
								<span class="mui-btn mui-btn-multi" data-state="stop" data-type="cstart">停止</span>
								<span class="mui-btn mui-btn-multi" data-state="close" data-type="cstart">收拢</span>
							</div>
							<div class="mui-input-row">
								<label style="width:45%">结束时执行</label>
								<span class="mui-btn mui-btn-multi" data-type="cend" data-state="open">展开</span>
								<span class="mui-btn mui-btn-multi" data-type="cend" data-state="stop">停止</span>
								<span class="mui-btn mui-btn-multi mui-btn-blue" data-type="cend" data-state="close">收拢</span>
							</div>
						</div>
					</div>
				</div>
				<div class="mui-card-footer">
					<label style="font-size:.8em">注意：条件计划优先权比时间计划要高，将会优先保障</label>
				</div>
			</div>
			<!--计划保存-->
			<div class="mui-card">
				<div class="mui-card-content-inner">
					<div class="mui-btn mui-btn-block mui-btn-blue" v-on:click="submitPlan()">保存计划</div>
				</div>
			</div>
			<!--弹框（控制器选择）-->
			<div class="mui-popover mui-popover-action mui-popover-bottom" id="controls">
				<div class="mui-card">
					<div class="mui-card-header">选择设备</div>
					<div class="mui-card-content mui-input-group" v-show="isswitch">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<div class="mui-input-row mui-checkbox" v-for="sw in switchs">
									<label>{{sw.powertargetname}}</label>
									<input name="checkbox1" v-bind:value="sw.targetcode" v-bind:data-controltype="sw.targettype" v-bind:data-name="sw.powertargetname"
									 type="checkbox" data-type="switch">
								</div>
							</div>
						</div>
					</div>
					<div class="mui-card-content mui-input-group" v-show="iscontrol">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<div class="mui-input-row mui-checkbox" v-for="ct in controls">
									<label>{{ct.powertargetname}}</label>
									<input name="checkbox1" v-bind:value="ct.targetcode" v-bind:data-controltype="ct.targettype" v-bind:data-name="ct.powertargetname"
									 type="checkbox" data-type="control">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="js/common.js"></script>
		<script src="js/config.js"></script>
		<script src="js/mui.js"></script>
		<script src="js/vue.min.js"></script>
		<script src="js/mui.picker.min.js"></script>
		<script>
			mui.init();
			mui.plusReady(function(){
				var self=plus.webview.all();
				var old_back = mui.back;
				mui.back = function() {
					var wobj = plus.webview.getWebviewById("plan.html");//注意 HBuilder 是   1.html 的 ID  你如果1.html 有ID   要替换掉HBuilder，
					//wobj.reload(true);
					wobj.evalJS("vm_plan.LoadPlanData();")
					//console.log(JSON.stringify(wobj));
					old_back()
				}
			});
			mui.ready(function() {
				var vm_plan = new Vue({
					el: "#plans",
					data: {
						switchs: [], // 开关集合
						controls: [], // 控制器集合
						isswitch: true, // 开关显示状态
						iscontrol: false, // 控制器显示状态
						sel_control: [], // 选择控制集合
						isctrl: true, // 开关是否显示请选择
						isrepeat: true, // 循环选择是否显示
						isbetween: false, // 时间段选择是否显示
						maxstate: "open", // 开始时执行
						minstate: "close", // 结束时执行
						intervalobj: { // 提交计划内容
							uid: 1, // 用户编号
							planname: "", // 计划名称
							desc: "", // 计划描述
							plantype: "", // 计划类型（interval | condition）
							ctype: "switch", // 控制器类型（switch | control）
							stime: "", // 开始时间
							etime: "", // 结束时间
							sstate: "", // 开始状态
							estate: "", // 结束状态
							repeat: 1, // 是否循环（1：每天 | -1：日期内）
							controls: [], // 控制器集合
							powerid: "", // 权限编号
						},
						betweenStartDate: null, // 日期段开始日期
						betweenEndDate: null, // 日期段结束日期
						betweenStartTime: null, // 时间段开始时间
						betweenEndTime: null, // 时间段结束时间
						startTime: "-请选择开始时间-", // 执行开始时间
						endTime: "-请选择结束时间-", // 执行结束时间
						startDate: "-请选择开始日期-", // 开始日期
						endDate: "-请选择结束日期-", // 结束日期
					},
					methods: {
						loadData: function() { // 缓存加载结构数据
							if (vm_plan.intervalobj.powerid == null) return;
							var data = setting.GetCacheConfig();
							if (data == null) return;
							for (var i = 0; i < data.length; i++) {
								if (vm_plan.intervalobj.powerid != data[i].powerid) continue;
								// 控制器对象
								mui("#planheader")[0].innerHTML = data[i].powername + "制定计划";
								if (data[i].controlTargetList.length > 0) {
									for (var j in data[i].controlTargetList) {
										if (data[i].controlTargetList[j].controlType == "switch") {
											vm_plan.$data.switchs.push(data[i].controlTargetList[j]);
										} else if (data[i].controlTargetList[j].controlType == "control") {
											vm_plan.$data.controls.push(data[i].controlTargetList[j]);
										}
									}
								}
							}
							// 弹出选择框无法自动识别高度，需要手动设置外部高度，此处根据填充数据来自动设置高度，每个元素高度为40px,间距2px
							mui('.mui-popover .mui-card-content').each(function(index, item) {
								var len = 0;
								switch (index) {
									case 0:
										len = vm_plan.$data.switchs.length;
										break;
									case 1:
										len = vm_plan.$data.controls.length;
										break;
								}
								item.style.height = (len > 5 ? 5 : len) * 42 + "px";
							});
						},
						submitPlan: function() {
							var d = vm_plan.$data;
							if (d.intervalobj.planname == "") {
								mui.toast("请输入计划名称", "div");
								return;
							}
							if (d.sel_control.length < 1) {
								mui.toast("请选择控制设备", "div");
								return;
							}
							if (d.startDate.indexOf("请") != -1) {
								mui.toast("请选择执行时间", "div");
								return;
							}
							if (d.startTime.indexOf("请") != -1 || d.endTime.indexOf("请") != -1) {
								mui.toast("请选择执行时间", "div");
								return;
							}
							var p = {};
							p.powerid = d.intervalobj.powerid;
							p.planname = d.intervalobj.planname;
							p.uid = d.intervalobj.uid;
							p.plantype = "interval";
							p.stime = new Date(d.startDate + " " + d.startTime).Format("yyyyMMddHHmm");
							p.etime = d.isrepeat ? new Date().Format("yyyyMMddHHmm") : new Date(d.endDate + " " + d.endTime).Format(
								"yyyyMMddHHmm");
							p.repeat = d.isrepeat ? 1 : -1;
							p.sstate = d.maxstate;
							p.estate = d.minstate;
							p.controls = [];
							// 构建控制集合
							for (var i = 0; i < d.sel_control.length; i++) {
								p.controls.push({
									code: d.sel_control[i].targetcode, // 控制器标识
									name: d.sel_control[i].name, // 控制器名称
									type: d.sel_control[i].targettype, // 控制器类型
								});
							}
							console.log(p);
							mui.ajax('http://124.232.165.93:34881/Plan/AddPlan', {
								data: p,
								dataType: 'json', //服务器返回json格式数据
								type: 'post', //HTTP请求类型
								timeout: 10000, //超时时间设置为10秒；
								headers: {
									'Content-Type': 'application/json'
								},
								success: function(data) {
									// console.log(JSON.stringify(data));
									if(data.code == "0"){
										mui.toast("保存计划成功", "div");
										setTimeout(function(){mui.back();},1000);
									}else{
										mui.toast(data.msg, "div");
									}
								},
								error: function(xhr, type, errorThrown) {
									//异常处理；
									console.log(type);
								}
							});
						},
						clearCheck: function() { // 复位选择信息，清空控制器选择
							vm_plan.$data.sel_control = [];
							vm_plan.$data.isctrl = true;
							mui("#controls input[type=checkbox]").each(function(i, v) {
								v.checked = false;
							})
						},
						chooseRepeatDate: function() { // 选择每天开始日期
							if (vm_plan.$data.betweenStartDate == null)
								vm_plan.$data.betweenStartDate = new mui.DtPicker({
									"type": "date",
									"beginDate": new Date()
								});
							vm_plan.$data.betweenStartDate.show(function(rs) {
								vm_plan.$data.startDate = rs.value;
							});
						},
						chooseBteweenDate: function(type) { // 选择日期段开始， 结束日期
							switch (type) {
								case "start": // 开始日期
									if (vm_plan.$data.betweenStartDate == null)
										vm_plan.$data.betweenStartDate = new mui.DtPicker({
											"type": "date",
											"beginDate": new Date()
										});
									vm_plan.$data.betweenStartDate.show(function(rs) {
										vm_plan.$data.startDate = rs.value;
										if (vm_plan.$data.betweenEndDate != null) {
											vm_plan.$data.betweenEndDate.dispose();
											vm_plan.$data.betweenEndDate = null;
											vm_plan.$data.endDate = "-请选择结束日期-";
										}
									});
									break;
								case "end": // 结束日期
									if (vm_plan.$data.startDate.indexOf("请") != -1) {
										mui.toast("请先选择开始日期", "div");
										return;
									}
									if (vm_plan.$data.betweenEndDate == null) {
										vm_plan.$data.betweenEndDate = new mui.DtPicker({
											"type": "date",
											"beginDate": new Date(vm_plan.$data.startDate)
										});
									}
									vm_plan.$data.betweenEndDate.show(function(rs) {
										vm_plan.$data.endDate = rs.value;
									});
									break;
							}
						},
						chooseBetweenTime: function(type) { // 选择时间区间
							switch (type) {
								case "start": // 开始时间
									if (vm_plan.$data.betweenStartTime == null)
										vm_plan.$data.betweenStartTime = new mui.DtPicker({
											"type": "time"
										});
									vm_plan.$data.betweenStartTime.show(function(rs) {
										vm_plan.$data.startTime = rs.value;
										if (vm_plan.$data.betweenEndTime != null) {
											vm_plan.$data.betweenEndTime.dispose();
											vm_plan.$data.betweenEndTime = null;
											vm_plan.$data.endTime = "-请选择结束日期-";
										}
									});
									break;
								case "end": // 结束时间
									if (vm_plan.$data.startTime.indexOf("请") != -1) {
										mui.toast("请先选择开始时间", "div");
										return;
									}
									if (vm_plan.$data.betweenEndTime == null) {

										vm_plan.$data.betweenEndTime = new mui.DtPicker({
											"type": "time"
										});
									}
									vm_plan.$data.betweenEndTime.show(function(rs) {
										vm_plan.$data.endTime = rs.value;
									});
									break;
							}
						}
					},
					mounted: function() {
						this.$nextTick(function() {
							console.log(GetQueryString("powerid"));
							vm_plan.intervalobj.powerid = GetQueryString("powerid");
							vm_plan.intervalobj.uid = GetQueryString("uid");
							vm_plan.loadData();
						});
					}
				});

				/**
				 * 初始化弹框内的滚动插件，否则无法使用
				 * */
				mui(".mui-scroll-wrapper").scroll();

				/**
				 * 触发条件选择事件，同时触发相关条件的联动事件
				 */
				mui(".mui-plan-info").on("tap", ".mui-btn", function() {
					var self = this;
					// 已聚焦的元素不处理
					if (self.className.indexOf("mui-btn-blue") != -1) return;
					var parent = self.parentElement;
					// 同级元素切换聚焦模式
					mui.each(parent.children, function(index, item) {
						if (item.className.indexOf("mui-btn") == -1) return; // 排除非按钮元素
						if (item.innerText == self.innerText) { // 当前选择元素
							item.classList.add("mui-btn-blue");
							selfindex = index;
							switch (self.dataset.type) {
								case "cstart": // 执行类型
									vm_plan.$data.maxstate = self.dataset.state;
									break;
								case "cend": // 执行类型
									vm_plan.$data.minstate = self.dataset.state;
									break;
							}
						} else {
							item.classList.remove("mui-btn-blue");
						}
					});
				})

				/**
				 * 控制开关类型选项监听事件
				 */
				mui('.mui-input-list').on("tap", ".mui-radio", function(e) {
					switch (this.dataset.type) {
						case "switch": // 选择开关
							if (vm_plan.$data.isswitch) return;
							vm_plan.$data.isswitch = true;
							vm_plan.$data.iscontrol = false;
							vm_plan.clearCheck();
							break;
						case "control": // 选择控制器
							if (vm_plan.$data.iscontrol) return;
							vm_plan.$data.isswitch = false;
							vm_plan.$data.iscontrol = true;
							vm_plan.clearCheck();
							break;
						case "repeat": // 选择每天
							if (vm_plan.$data.isrepeat) return;
							vm_plan.$data.isrepeat = true;
							vm_plan.$data.isbetween = false;
							vm_plan.$data.endDate = "-请选择结束日期-";
							if (vm_plan.$data.betweenEndDate != null) {
								vm_plan.$data.betweenEndDate.dispose();
								vm_plan.$data.betweenEndDate = null;
							}
							break;
						case "between": // 选择日期内
							if (vm_plan.$data.isbetween) return;
							vm_plan.$data.isrepeat = false;
							vm_plan.$data.isbetween = true;
							vm_plan.$data.endDate = "-请选择结束日期-";
							break;
					}
				});

				/**
				 * 条件触发事件
				 */
				mui(".mui-card-content").on("tap", ".condition", function() {
					mui('#controls').popover('toggle');
				});

				/**
				 * 控制器选择事件
				 * */
				mui('.mui-input-group').on('change', 'input', function() {
					var c = vm_plan.$data.sel_control.getobj("name", this.dataset.name);
					if (this.checked && c == undefined) {
						// 添加控制集合数据
						vm_plan.$data.sel_control.push({
							name: this.dataset.name,
							targetcode: this.value,
							targettype: this.dataset.controltype,
						});
					} else {
						vm_plan.$data.sel_control.remove(c);
					}
					vm_plan.$data.isctrl = vm_plan.$data.sel_control.length < 1;
				});
			})
		</script>
	</body>
</html>
